<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-01 14:45:40
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-27 14:30:20
-->
<template>
  <div id="main">
    <dv-loading v-if="false">Loading...</dv-loading>
    <div class="topTitleBox">
      <div class="dateTimeBox">
        <div class="dateTimeBox-after"></div>
        <span class="dateText">
          <dv-decoration-7 style="height: 30px"
            >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</dv-decoration-7
          ></span
        >
      </div>
      <dv-decoration-10 style="width: 33.33%; height: 10px; margin-top: 20px" />
      <div class="leftDecorate">
        <dv-decoration-3 style="width: 100%; height: 30px" />
      </div>
      <dv-decoration-8
        :color="['#568aea', '#000000']"
        style="width: 10%; height: 50px; margin-top: 25px"
      />
      <div class="title">
        <dv-decoration-5
          :dur="2"
          :color="['#568aea', '#568aea']"
          style="width: 100%; height: 30px"
        /><span>大数据可视化平台</span>
        <dv-decoration-6
          class="title-bototm"
          :reverse="true"
          :color="['#50e3c2', '#67a1e5']"
          style="width: 250px; height: 10px"
        />
      </div>
      <dv-decoration-8
        :reverse="true"
        :color="['#568aea', '#000000']"
        style="width: 10%; height: 50px; margin-top: 20px"
      />
      <dv-decoration-10
        style="
          width: 33.33%;
          height: 10px;
          margin-top: 15px;
          transform: rotateY(180deg);
        "
      />
    </div>
    <div class="content">
      <div class="contentTopBox">
        <div>
          <dv-border-box-1 class="flex-vertical">
            <!-- 左上角两个charts -->
            <div><topLeftChart1 /></div>
            <div><topLeftChart2 /></div>
          </dv-border-box-1>
        </div>
        <div>
          <dv-border-box-8>
            <table1 />
          </dv-border-box-8>
        </div>
        <div>
          <dv-border-box-8> <table2 /></dv-border-box-8>
        </div>
        <div>
          <dv-border-box-1 class="flex-vertical">
            <div><topRightChart1 /></div>
            <div><topRightChart2 /></div>
          </dv-border-box-1>
        </div>
      </div>
      <div class="contentBottomBox">
        <div>
          <dv-border-box-13 class="bottomBox1">
            <bottomLeft />
            <bottomLeftMid />
          </dv-border-box-13>
        </div>
        <div>
          <bottomMid />
        </div>
        <div>
          <dv-border-box-12 class="bottomBox2">
            <bottomRightMid />
            <bottomRight />
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import table1 from "./components/datav/table1.vue";
import table2 from "./components/datav/table2.vue";
import topLeftChart1 from "./components/datav/topLeftChart1.vue";
import topLeftChart2 from "./components/datav/topLeftChart2.vue";
import topRightChart1 from "./components/datav/topRightChart1.vue";
import topRightChart2 from "./components/datav/topRightChart2.vue";
import bottomLeft from "./components/datav/bottomLeft.vue";
import bottomLeftMid from "./components/datav/bottomLeftMid.vue";
import bottomRight from "./components/datav/bottomRight.vue";
import bottomRightMid from "./components/datav/bottomRightMid.vue";
import bottomMid from "./components/datav/bottomMid.vue";
export default {
  name: "Home",
  components: {
    table1,
    table2,
    topLeftChart1,
    topLeftChart2,
    topRightChart1,
    topRightChart2,
    bottomLeft,
    bottomLeftMid,
    bottomRight,
    bottomRightMid,
    bottomMid,
  },
  data() {
    return {
      dateDay: null, //时间
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  created() {},
  mounted() {
    this.timeFn();
  },
  methods: {
    timeFn() {
      //获取时间
      setInterval(() => {
        this.dateDay = this.formatTimes(new Date(), "HH: mm: ss");
        this.dateYear = this.formatTimes(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    formatTimes(time, fmt) {
      if (!time) return "";
      else {
        const date = new Date(time);
        const o = {
          "M+": date.getMonth() + 1,
          "d+": date.getDate(),
          "H+": date.getHours(),
          "m+": date.getMinutes(),
          "s+": date.getSeconds(),
          "q+": Math.floor((date.getMonth() + 3) / 3),
          S: date.getMilliseconds(),
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        for (const k in o) {
          if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
          }
        }
        return fmt;
      }
    },
  },
};
</script>

<style scoped lang="scss">
#main {
  width: 100%;
  height: 100%;
  // min-width: 1850px;
  background: url("~@/assets/bg.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  ::v-deep .loading-tip {
    font-size: 23px !important;
    color: aqua;
    font-weight: bold;
  }
  .topTitleBox {
    width: 100%;
    height: 80px;
    display: flex;
    position: relative;
    .leftDecorate {
      position: absolute;
      left: 7%;
      top: 32px;
    }
    .dateTimeBox {
      position: absolute;
      right: 7%;
      top: 27px;
      color: #06f1ef;
      font-size: 20px;
      background-color: rgb(15, 19, 37);
      width: 20.33%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      -webkit-transform: skewX(-45deg);
      transform: skewX(-45deg);
      .dateText {
        display: inline-block;
        transform: skewX(45deg);
      }
      .dateTimeBox-after {
        position: absolute;
        right: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: rgb(15, 19, 37);
        -webkit-transform: skewX(45deg);
        transform: skewX(45deg);
      }
    }
    .title {
      width: 500px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 25px;
      color: white;
    }
  }
  .content {
    width: 100%;
    height: calc(100vh - 80px);
    padding-top: 20px;
    .contentTopBox {
      height: 55%;
      padding: 10px;
      display: grid;
      grid-template-columns: 3fr 6.5fr 6fr 3fr;
      ::v-deep.flex-vertical .border-box-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 10px;
        div {
          width: 92%;
          height: 49%;
          background-color: rgba(19, 25, 47, 0.6);
        }
        div:first-child {
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
        }
        div:last-child {
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      }
    }
    .contentBottomBox {
      height: 45%;
      padding: 10px;
      display: grid;
      grid-template-columns: 5fr 1fr 5fr;
      .bottomBox1,
      .bottomBox2 {
        padding: 10px;
        width: 100%;
        height: 100%;
      }
      .bottomBox1 {
        ::v-deep .border-box-content {
          display: grid;
          grid-template-columns: 5fr 3.5fr;
        }
      }
      .bottomBox2 {
        ::v-deep .border-box-content {
          display: grid;
          grid-template-columns: 3.5fr 5fr;
        }
      }
    }
  }
}
</style>
